---
title: Alkalmazássúgó
image: /images/user-guide/tips/light-bulb.png
---

<Frame>
  <img src="/images/user-guide/tips/light-bulb.png" alt="Header" />
</Frame>

Egy rövid üzenet, amely további információkat jelenít meg, amikor a felhasználó egy elemmel lép kapcsolatba.

<Tabs>
<Tab title="Usage">

```jsx
import { AppTooltip } from "@/ui/display/tooltip/AppTooltip";

export const MyComponent = () => {
  return (
    <>
      <p id="hoverText" style={{ display: "inline-block" }}>
        Customer Insights
      </p>
      <AppTooltip
        className
        anchorSelect="#hoverText"
        content="Explore customer behavior and preferences"
        delayHide={0}
        offset={6}
        noArrow={false}
        isOpen={true}
        place="bottom"
        positionStrategy="absolute"
      />
    </>
  );
};
```

</Tab>

<Tab title="Props">

| Tulajdonságok    | Típus                                           | Leírás                                                                                                                                                                                                                                    |
| ---------------- | ----------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| className        | string                                          | Opcionális CSS osztály további stílushoz                                                                                                                                                                                                  |
| anchorSelect     | CSS választó                                    | Választó a súgópont lekötéséhez (az elem, amely kiváltja a súgópontot)                                                                                                                                                 |
| tartalom         | string                                          | A tartalom, amit meg szeretnél jeleníteni a súgóponton belül                                                                                                                                                                              |
| delayHide        | szám                                            | A késleltetés másodpercekben, mielőtt a súgópont elrejtőzik, miután a kurzor elhagyja a horgonyt                                                                                                                                          |
| eltolás          | szám                                            | Az eltolás pixelben a súgópont pozicionálásához                                                                                                                                                                                           |
| noArrow          | boolean                                         | Ha `true`, elrejti a nyilat a súgóponton                                                                                                                                                                                                  |
| isOpen           | boolean                                         | Ha `true`, a súgópont alapértelmezetten nyitva van                                                                                                                                                                                        |
| hely             | `PlacesType` string a `react-tooltip`-ból       | Megadja a súgópont elhelyezését. Az értékek tartalmazzák: `bottom`, `left`, `right`, `top`, `top-start`, `top-end`, `right-start`, `right-end`, `bottom-start`, `bottom-end`, `left-start`, és `left-end` |
| pozícióStratégia | `PositionStrategy` string a `react-tooltip`-ból | A súgópont pozíciós stratégiája. Két érték lehet: `abszolút` és `rögzített`                                                                                                                               |

</Tab>

</Tabs>

## Túlcsorduló szöveg a Súgóponttal

Kezeli a túlcsorduló szöveget, és súgópontot jelenít meg, amikor a szöveg túlcsordul.

<Tabs>
<Tab title="Usage">

```jsx
import { OverflowingTextWithTooltip } from 'twenty-ui/display';

export const MyComponent = () => {
  const crmTaskDescription =
    'Follow up with client regarding their recent product inquiry. Discuss pricing options, address any concerns, and provide additional product information. Record the details of the conversation in the CRM for future reference.';

  return <OverflowingTextWithTooltip text={crmTaskDescription} />;
};
```

</Tab>

<Tab title="Props">

| Tulajdonságok | Típus  | Leírás                                                                      |
| ------------- | ------ | --------------------------------------------------------------------------- |
| szöveg        | string | A tartalom, amelyet meg szeretnél jeleníteni a túlcsorduló szöveg területen |

</Tab>

</Tabs>
